<template>
    <view>
        <view>
            <view class="header" :style="'background:url(' + img_base_url + '/beijin.png)'">
                <view class="head-portrait">
                    <img :src="userInfo.avatarUrl" alt="" style="width:100%;height:100%;border-radius:50%" v-if="userInfo.length != 0">
                    <img :src="img_base_url + '/touxiang.png'" alt="" style="width:100%;height:100%;border-radius:50%" v-else>
                </view>
                <view class="person">
                    <view class="nickname" v-if="userInfo.length !== 0">
                        <view>{{userInfo.nickName}}</view>
                        <view style="font-size:24rpx">{{phone}}</view>
                    </view>
                    <view class="nickname"  @tap="getUserInfo" v-else>点击获取个人信息</view>
                    <!-- <view class="edit">编辑个人资料</view> -->
                </view>
                <!-- <view class="edit-info iconfont icon-xiangyou"></view> -->
            </view>
            <!-- 虚拟订单 -->
            <view class="order-virtual" @tap.stop="goVirtualOrder()"> 
                <view class="order-virtual-title">
                    虚拟订单<i class="iconfont icon-xiangyou" style="color:#999999;font-size:28rpx;margin-left:31rpx;margin-top:6rpx"></i>
                </view>
                <view class="order-virtual-function">
                    <block v-for="(item, index) in virtualOrderType" :key="index">
                        <view class="order-virtual-function-item" @tap.stop="goVirtualOrder(item.id)">
                            <view class="order-virtual-function-img">
                                <img :src="img_base_url + item.icon" alt="" style="width:100%;height:100%">
                            </view>
                            <view class="order-virtual-function-name">{{item.name}}</view>
                        </view>
                    </block>
                </view>
            </view>
            <!-- 实物订单 -->
            <view class="order-true"> 
                <view class="order-true-title" @tap="goTrueOrder()">
                    实物订单<i class="iconfont icon-xiangyou" style="color:#999999;font-size:28rpx;margin-left:31rpx;margin-top:6rpx"></i>
                </view>
                <view class="order-true-function">
                    <block v-for="(item, index) in trueOrderType" :key="index">
                        <view class="order-true-function-item" @tap="goTrueOrder(item.id)">
                            <view class="order-true-function-img">
                                <img :src="img_base_url + item.icon" alt="" style="width:100%;height:100%">
                            </view>
                            <view class="order-true-function-name">{{item.name}}</view>
                        </view>
                    </block>
                </view>
            </view>
            <!-- 个人功能 -->
            <view class="person-function">
                <view class="person-function-item" @tap="goMyAssessment">
                    <view class="person-function-item-img" style="width:52rpx;height:47rpx">
                        <img :src="img_base_url + '/wodedianpin.png'" alt="" style="width:100%;height:100%">
                    </view>
                    <view class="person-function-item-name">我的点评</view>
                </view>
                <view class="person-function-item" @tap="goGroupOrder">
                    <view class="person-function-item-img" style="width:55rpx;height:44rpx">
                        <img :src="img_base_url + '/wodepindan.png'" alt="" style="width:100%;height:100%">
                    </view>
                    <view class="person-function-item-name">我的拼单</view>
                </view>
                <!-- <view class="person-function-item">
                    <view class="person-function-item-img" style="width:49rpx;height:47rpx">
                        <img :src="img_base_url + '/guanyuwomen.png'" alt="" style="width:100%;height:100%">
                    </view>
                    <view class="person-function-item-name">关于我们</view>
                </view> -->
                <!-- <view class="person-function-item" @tap="goRefund">
                    <view class="person-function-item-img" style="width:47rpx;height:48rpx">
                        <img :src="img_base_url + '/tuikuanshouhou.png'" alt="" style="width:100%;height:100%">
                    </view>
                    <view class="person-function-item-name">退款/售后</view>
                </view> -->
                <view class="person-function-item" @tap="goShippingAddress">
                    <view class="person-function-item-img" style="width:52rpx;height:51rpx">
                        <img :src="img_base_url + '/shouhuodizhi.png'" alt="" style="width:100%;height:100%">
                    </view>
                    <view class="person-function-item-name">收货地址</view>
                </view>
                <!-- <view class="person-function-item">
                    <view class="person-function-item-img">
                        <img :src="img_base_url + '/shezhi.png'" alt="" style="width:100%;height:100%">
                    </view>
                    <view class="person-function-item-name">设置</view>
                </view> -->

            </view>
        </view>
        <tabBar address="3"></tabBar>
    </view>
</template>

<script>
import { config } from '../../common/utils/congfig'
import tabBar from '../../components/tabBar/tabBar'

export default {
    data() {
        return {
            img_base_url: config.img_base_url,
            virtualOrderType: [
                {  
                    id: 1,
                    name: '待付款', 
                    icon: '/daifukuan.png'
                }, 
                {
                    id: 3,
                    name: '待使用', 
                    icon: '/daishiyon.png'
                },
                {
                    id: 4,
                    name: '待评价', 
                    icon: '/daipingjia.png'
                }
            ],
            trueOrderType: [
                {
                    id: 1,
                    name: '待付款', 
                    icon: '/daifukuan.png'
                }, 
                {
                    id: 2,
                    name: '待发货', 
                    icon: '/daifahuo.png'
                },
                {
                    id: 3,
                    name: '待收货', 
                    icon: '/daishouhuo.png'
                },
                {
                    id: 4,
                    name: '待评价', 
                    icon: '/daipingjia.png'
                }
            ],
            userInfo: [],
            phone: ''
        }
    },
    components: {
        tabBar
    },
    methods: {
        goVirtualOrder(id) {
            const loginRes = this.checkLogin('/pages/my/my', '1')
            if(loginRes) {
                if(id === undefined) {
                    id = 0
                }
                console.log(id)
                uni.navigateTo({
                    url: '/pagesC/order-virtual/order-virtual?orderStatus=' + id
                })
            }
        },
        goTrueOrder(id) {
            const loginRes = this.checkLogin('/pages/my/my', '1')
            if(loginRes) {
                if(id === undefined) {
                    id = 0
                }
                console.log(id)
                uni.navigateTo({
                    url: '/pagesC/order-true/order-true?orderStatus=' + id
                })
            }
        },
        goGroupOrder() {
            const loginRes = this.checkLogin('/pages/my/my', '1')
            if(loginRes) {
                uni.navigateTo({
                    url: '/pagesC/order-group/order-group'
                })
            }
        },
        goMyAssessment() {
            const loginRes = this.checkLogin('/pages/my/my', '1')
            if(loginRes) {
                uni.navigateTo({
                    url: '/pagesD/my-assessment/my-assessment'
                })
            }
        },
        goShippingAddress() {
            const loginRes = this.checkLogin('/pages/my/my', '1')
            if(loginRes) {
                uni.navigateTo({
                    url: '/pagesD/shipping-address/shipping-address'
                })
            }
        },
        goRefund() {
            uni.navigateTo({
                url: '/pagesD/refund/refund'
            })
        },
        getUserInfo() {
            uni.navigateTo({
                url: '/pagesB/login/login-userInfo'
            })
        }
    },
    onShow() {
        let userInfo = JSON.parse(uni.getStorageSync('wxuserInfo'))
        this.userInfo = userInfo
        console.log(this.userInfo)
        this.phone = uni.getStorageSync('userPhone')
    },
    onShareAppMessage() {
		uni.share({
			provider: 'weixin',
			scene: 'WXSceneSession',
			type: 5,
			title: '农乎',
			imageUrl: 'http://qiniu.quanyubao.cn/logo.png',
			miniProgram: {
				id: 'gh_58835c3bb0aa',
				path: 'pages/index/index',
				type: 0
			}
		})
	}
}
</script>

<style>
    .header {
        width: 100%;
        height: 240rpx;
        /* background: #24C79C; */
        overflow: hidden;
        display: flex;
        justify-content: left;
    }
    .head-portrait {
        width: 115rpx;
        height: 115rpx;
        margin-top: 67rpx;
        margin-left: 49rpx;
    }
    .person {
        margin: auto 0;
        margin-left: 22rpx;
    }
    .nickname {
        color: #FFFFFF;
        font-size: 36rpx;
        font-weight: 500;
    }
    .edit {
        color: #FFFFFF;
        font-size: 24rpx;
        font-weight: 500;
    }
    .edit-info {
        line-height: 240rpx;
        color: #fff;
        margin-left: 300rpx;
    }
    .order-virtual,
    .order-true,
    .person-function {
        height: 204rpx;
        background: #FFFFFF;
        margin-top: 20rpx;
        overflow: hidden;
    }
    .person-function {
        /* height: 279rpx; */
    }
    .order-virtual-title,
    .order-true-title {
        display: flex;
        justify-content: left;
        color: #333333;
        font-size: 30rpx;
        font-weight: bold;
        margin-top: 26rpx;
        margin-left: 50rpx;
    }
    .order-virtual-function,
    .order-true-function {
        padding: 0 95rpx;
        margin-top: 24rpx;
        display: flex;
        justify-content: space-between;
    }
    .order-true-function {
        padding: 0 55rpx;
    }
    .order-virtual-function-img,
    .order-true-function-img {
        width: 57rpx;
        height: 53rpx;
        margin-left: 10rpx;
    }
    .order-virtual-function-name,
    .order-true-function-name {
        color: #666666;
        font-size: 26rpx;
        font-weight: 500;
        margin-top: 10rpx;
    }
    .person-function {
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
        /* padding: 50rpx 70rpx 0; */
        padding-top: 50rpx;
    }
    .person-function-item {
        width: 120rpx;
        height: 120rpx;
        padding: 0rpx 60rpx;
        text-align: center;
    }
    .person-function-item-img {
        /* width: 55rpx;
        height: 47rpx; */
        margin: 0 auto;
    }
    .person-function-item-name {
        color: #666666;
        font-size: 26rpx;
        font-weight: 500;
        margin-top: 20rpx;
    }
</style>